<template>
  <div>
    <!-- 

  名门望族 张琼宇  用户页面模态框

 -->
    <el-dialog :title="mydialog.title" :visible.sync="mydialog.flag" >
      <el-form :model="formdata" :rules="rules" ref="formdata">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formdata.username" autocomplete="off" :disabled="mydialog.type=='edit'"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="username" v-show="mydialog.type!='edit'">
          <el-input v-model="formdata.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formdata.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="formdata.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="mydialog.flag = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import { addUseR, Edit } from '@/utils/userapi'
export default {
  props: {
    mydialog: Object,
    formdata: Object
  },
  data() {
    return {
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    async submit() {
      // console.log(this.formdata);
      if (this.mydialog.type == 'add') {
        let res = await addUseR(this.formdata)
        // console.log(res);
        if (res.meta.status == 201) {
          this.$message.success(res.meta.msg)
          this.mydialog.flag = false
          this.$emit('update')
        } else {
          this.$message.error(res.meta.msg)
        }
      } else if (this.mydialog.type == 'edit') {
        let res = await Edit(this.formdata.id, this.formdata)
        // console.log(res);
        if (res.meta.status == 200) {
          this.$message.success(res.meta.msg)
          this.mydialog.flag = false
          this.$emit('update')
        } else {
          this.$message.error(res.meta.msg)
        }
      }
    }
  },
}
  </script>
  
  <style>
</style>